<template>
  <view :style="colorStyle">
    <view class="header">
      <view class="headerCon">
        <view class="account acea-row row-top row-between">
          <view class="assets">
            <view>我的{{ title }}(元)</view>
            <view class="money" v-if="pid == 0">{{ userInfo.brokerage_price || 0 }}</view>
            <view class="money" v-if="pid == 1">{{ userInfo.brokerage_price_one || 0 }}</view>
            <view class="money" v-if="pid == 2">{{ userInfo.brokerage_price_two || 0 }}</view>
            <view class="money" v-if="pid == 3">{{ userInfo.brokerage_price_thr || 0 }}</view>
          </view>
          <view @click="openSubscribe('/pages/users/user_payment/index')" class="recharge">提现</view>
        </view>
      </view>
    </view>
    <view class="nav acea-row">
      <view class="item" :class="tab_type == 0 ? 'on' : ''" @click="changeType(0)">余额记录</view>
      <view class="item" :class="tab_type == 1 ? 'on' : ''" @click="changeType(1)">提现记录</view>
    </view>
    <view class="commission-details">
      <timeSlot @changeTime="changeTime"></timeSlot>
      <view class="sign-record">
        <!-- <view class="top_num" v-if="recordType != 4 && recordList.length">
					支出：¥{{expend || 0}} &nbsp;&nbsp;&nbsp; 收入：¥{{income || 0}}
				</view> -->
        <view class="box">
          <block v-for="(item, index) in recordList" :key="index" v-if="recordList.length > 0">
            <view class="list">
              <view class="item">
                <view class="listn">
                  <view class="itemn1 acea-row row-between-wrapper">
                    <view>
                      <view class="name line1">
                        {{ item.title }}
                        <text class="status_badge default" v-if="recordType == 4 && item.status == 0">待审核</text>
                        <text class="status_badge error" v-if="recordType == 4 && item.status == 2">未通过</text>
                      </view>
                      <view class="mark" v-if="recordType == 4 && item.mark && item.status !== 1">{{ item.mark }}</view>
                      <view>{{ item.add_time }}</view>
                    </view>
                    <view class="num font-color" v-if="item.pm == 1">+{{ item.number }}</view>
                    <view class="num" v-else>-{{ item.number }}</view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>

        <view class="loadingicon acea-row row-center-wrapper" v-if="recordList.length">
          <text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>{{ loadTitle }}
        </view>
        <view v-if="recordList.length < 1 && page > 1">
          <emptyPage title="暂无数据~"></emptyPage>
        </view>
      </view>
    </view>
    <home v-if="navigation"></home>
  </view>
</template>

<script>
import { moneyList, getUserInfo, getSpreadInfo } from '@/api/user.js'
import { toLogin } from '@/libs/login.js'
import { mapGetters } from 'vuex'
import emptyPage from '@/components/emptyPage.vue'
import home from '@/components/home'
import colors from '@/mixins/color.js'
import timeSlot from '@/components/timeSlot/index.vue'
export default {
  components: {
    emptyPage,
    home,
    timeSlot
  },
  mixins: [colors],
  data() {
    return {
      name: '',
      keyword: '',
      type: 0,
      page: 1,
      limit: 15,
      loading: false,
      loadend: false,
      loadTitle: '加载更多',
      recordList: [],
      recordType: 0,
      recordCount: 0,
      extractCount: 0,
      times: [],
      start: 0,
      stop: 0,
      income: '',
      expend: '',
      isShowAuth: false,
      tab_type: 0,
      userInfo: {}
    }
  },
  computed: mapGetters(['isLogin']),
  onLoad(options) {
    this.pid = options.pid
    this.type = options.type
    this.title = options.title
    if (!this.isLogin) {
      toLogin()
    }
  },
  onShow: function () {
    this.getUserData()
    uni.removeStorageSync('form_type_cart')
    let type = this.type
    if (type == 1) {
      uni.setNavigationBarTitle({
        title: this.title
      })
      this.name = '提现总额'
      this.recordType = 3
      this.getRecordList()
    } else if (type == 2) {
      uni.setNavigationBarTitle({
        title: this.title
      })
      this.name = '佣金明细'
      this.recordType = 3
      this.getRecordList()
    } else if (type == 4) {
      uni.setNavigationBarTitle({
        title: this.title
      })
      this.name = '提现明细'
      this.recordType = 4
      this.getRecordList()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none',
        duration: 1000,
        mask: true,
        success: function (res) {
          setTimeout(function () {
            // #ifndef H5
            uni.navigateBack({
              delta: 1
            })
            // #endif
            // #ifdef H5
            history.back()
            // #endif
          }, 1200)
        }
      })
    }
  },
  methods: {
    /**
     * 获取个人用户信息
     */
    getUserData: function () {
      let that = this
      getUserInfo()
        .then((res) => {
          console.log('>>>>>>>>>>获取个人用户信息', res.data)
          that.userInfo = res.data
        })
        .catch((err) => {})
    },
    changeType: function (type) {
      this.tab_type = type
      if (type == 1) {
        this.recordType = 1
      } else {
        this.recordType = 3
      }
      this.loading = false
      this.loadend = false
      this.page = 1
      this.$set(this, 'recordList', [])
      this.getRecordList()
    },
    submitForm() {
      this.page = 1
      this.limit = 20
      this.loadend = false
      this.status = false
      this.$set(this, 'recordList', [])
      this.$set(this, 'times', [])
      this.getRecordList()
    },
    changeTime(time) {
      this.start = time.start
      this.stop = time.stop
      this.page = 1
      this.loadend = false
      this.$set(this, 'recordList', [])
      this.getRecordList()
    },
    getRecordList: function () {
      let that = this
      let page = that.page
      let limit = that.limit
      let recordType = that.recordType
      if (that.loading) return
      if (that.loadend) return
      that.loading = true
      that.loadTitle = ''

      moneyList(
        {
          keyword: that.keyword,
          start: that.start,
          stop: that.stop,
          page: page,
          limit: limit,
          pid: that.pid
        },
        recordType
      )
        .then((res) => {
          console.log('>>>>>>><<', res)
          that.expend = res.data.expend
          that.income = res.data.income
          that.recordList = that.recordList.concat(res.data.list)
          let loadend = res.data.list.length < that.limit
          that.loadend = loadend
          that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多'
          that.page += 1
          that.loading = false
        })
        .catch((err) => {
          console.log('>>>>>>><<', err)
          that.loading = false
          that.loadTitle = '加载更多'
        })
    },
    getRecordListCount: function () {
      let that = this
      getSpreadInfo().then((res) => {
        that.recordCount = res.data.commissionCount
        that.extractCount = res.data.extractCount
      })
    },
    openSubscribe: function () {
      uni.navigateTo({
        url: `/pages/users/user_cash/index?pid=${this.pid}&title=${this.title}`
      })
    }
  },
  onReachBottom: function () {
    this.getRecordList()
  }
}
</script>

<style scoped lang="scss">
.header {
  width: 690rpx;
  background: var(--view-theme);
  border-radius: 16rpx;
  margin: 30rpx auto;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
}

.header .headerCon {
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  width: 100%;
  padding: 80rpx 0 80rpx 0;
  box-sizing: border-box;
}

.header .headerCon .account {
  padding: 0 35rpx;
  position: relative;
}

.header .headerCon .account .assets .money {
  font-size: 72rpx;
  color: #fff;
  font-family: 'Guildford Pro';
}

.header .headerCon .account .recharge {
  font-size: 28rpx;
  width: 150rpx;
  height: 54rpx;
  border-radius: 27rpx;
  background-color: #fff9f8;
  text-align: center;
  line-height: 54rpx;
  color: var(--view-theme);
  position: absolute;
  top: 25rpx;
  right: 30rpx;
}

.header .headerCon .cumulative {
  margin-top: 46rpx;
}

.header .headerCon .cumulative .item {
  flex: 1;
  padding-left: 35rpx;
}

.header .headerCon .cumulative .item .money {
  font-size: 48rpx;
  font-family: 'Guildford Pro';
  color: #fff;
  margin-top: 6rpx;
}
.nav {
  background-color: #fff;
  height: 90rpx;
  width: 100%;
  line-height: 90rpx;
}

.nav .item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #282828;
}

.nav .item.on {
  color: var(--view-theme);
  border-bottom: 3rpx solid var(--view-theme);
}

.commission-details .search {
  width: 100%;
  background-color: var(--view-theme);
  border-bottom: 1px solid #f2f2f2;
  height: 86rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.commission-details .search .input {
  width: 100%;
  height: 60rpx;
  border-radius: 50rpx;
  background-color: #f5f5f5;
  position: relative;
}

.commission-details .search .input input {
  height: 100%;
  font-size: 26rpx;
  width: 100%;
  padding-left: 60rpx;
}

.box {
  border-radius: 14rpx;
  margin: 0 30rpx;
  overflow: hidden;
}

.commission-details .search .input .placeholder {
  color: #bbb;
}

.commission-details .search .input .iconfont {
  position: absolute;
  left: 28rpx;
  color: #999;
  font-size: 28rpx;
  top: 50%;
  transform: translateY(-50%);
}

.sign-record {
  margin-top: 20rpx;
}

.commission-details .promoterHeader .headerCon .money {
  font-size: 36rpx;
}

.commission-details .promoterHeader .headerCon .money .num {
  font-family: 'Guildford Pro';
}

.top_num {
  padding: 10rpx 30rpx 30rpx 30rpx;
  font-size: 26rpx;
  color: #666;
}

.radius15 {
  border-radius: 14rpx 14rpx 0 0;
}
.sign-record .list .item .listn .itemn1 {
  border-bottom: 1rpx solid #eee;
  padding: 22rpx 24rpx;
}
.sign-record .list .item .listn .itemn1 .name {
  width: 390rpx;
  font-size: 28rpx;
  color: #282828;
  margin-bottom: 10rpx;
}
.sign-record .list .item .listn .itemn1 .num {
  font-size: 36rpx;
  font-family: 'Guildford Pro';
  color: #16ac57;
}
.sign-record .list .item .listn .itemn1 .num.font-color {
  color: #e93323 !important;
}
.mark {
  margin-bottom: 10rpx;
}
.status_badge {
  display: inline-block;
  height: 30rpx;
  border-radius: 4rpx;
  font-size: 20rpx;
  line-height: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-left: 12rpx;
  padding: 0 6rpx 0;
}
.success {
  background: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}
.default {
  background: #f5f5f5;
  color: #282828;
}
.error {
  background: rgba(233, 51, 35, 0.1);
  color: #e93323;
}
</style>
